<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div class="node-item-icon bpmn-selection" />
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div class="node-item-icon bpmn-start" />
      <span class="node-label">开始节点</span>
    </div>
    <div class="node-item" @mousedown="addUserTask()">
      <div class="node-item-icon bpmn-user" />
      <span class="node-label">普通节点</span>
    </div>
    <div class="node-item" @mousedown="addServiceTask()">
      <div class="node-item-icon bpmn-service" />
      <span class="node-label">系统</span>
    </div>
    <div class="node-item" @mousedown="addGateWay()">
      <div class="node-item-icon bpmn-gateway" />
      <span class="node-label">判断</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div class="node-item-icon bpmn-end" />
      <span class="node-label">结束节点</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BpmnNodePanel',
  props: {
    lf: Object
  },
  data() {
    return {}
  },

  mounted() {
    // 选区框选使用的
    const lf = this.$props.lf
    lf &&
    lf.on('selection:selected', () => {
      lf.updateEditConfig({
        stopMoveGraph: false
      })
    })
  },
  methods: {
    openSelection() {
      (this.$props.lf).updateEditConfig({
        stopMoveGraph: true
      })
    },
    addStartNode() {
      (this.$props.lf).dnd.startDrag({
        type: 'bpmn:startEvent',
        text: '开始节点'
      })
    },
    addUserTask() {
      (this.$props.lf).dnd.startDrag({
        type: 'bpmn:userTask',
        text: '普通节点'
      })
    },
    addServiceTask() {
      (this.$props.lf).dnd.startDrag({
        type: 'bpmn:serviceTask',
        text: '系统'
      })
    },
    addGateWay() {
      (this.$props.lf).dnd.startDrag({
        type: 'bpmn:exclusiveGateway',
        text: '判断'
      })
    },
    addEndNode() {
      (this.$props.lf).dnd.startDrag({
        type: 'bpmn:endEvent',
        text: '结束节点'
      })
    }
  }
}
</script>

<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}

.node-item {
  margin-bottom: 10px;
}

.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.bpmn-selection {
  background: url()
  no-repeat;
  cursor: grab;
}

.bpmn-start {
  background: url() no-repeat;
  cursor: grab;
}

.bpmn-end {
  background: url()
  center no-repeat;
  cursor: grab;
}

.bpmn-user {
  background: url() no-repeat;
  cursor: grab;
}

.bpmn-gateway {
  background: url() no-repeat;
  cursor: grab;
}

.bpmn-service {
  background: url() no-repeat;
  cursor: grab;
}
</style>
